<template>
    <div class="relative-box">
            <el-upload
            class="upload-box"
            :disabled="disabled"
            :action='uploadUrl'
            :multiple="isMultiple"
            :limit="limit"
            :data="otherData"
            :name='filedName'
            :file-list="fileList"
            :show-file-list="true"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-remove="deleteFile"
            :on-error="handleError"
            :on-preview="uploadLoad"
            :beforeUpload="beforeAvatarUpload"
            :accept="acceptFileType"
            :headers="headers">
            <div class="align-center">
                <el-button size="mini" :type="buttonType" class="f-left normal-btn" plain ref="upload">{{btnName}}</el-button>
                <slot name="info"></slot>
            </div>
            </el-upload>
    </div>
</template>

<script>

export default {
    name: "up-load",
    props: {
        disabled:{
            type: Boolean,
            default: false
        },
        limit: {
            type: Number,
            default: 1
        },
        maxSize: {
            type: Number,
            default: 50
        },
        isMultiple: {
            type: Boolean,
            default: false
        },
        fileList: {
            type: Array,
            default: () => {
                return []
            }
        },
        otherData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        action: {
            type: String,
            default: '/frameworks/photos/upload'
        },
        //限制类型
        acceptFileType: {
            type: String,
            default: ''
        },
        //限制类型
        filedName: {
            type: String,
            default: ''
        },
        //按钮文字
        btnName: {
            type: String,
            default: '点击上传'
        },
        //上传文件的按钮类型
        buttonType: {
            type: String,
            default: 'primary'
        }
    },
    data() {
        return {
            uploadUrl:'/server-api/v1' + this.action,
            headers: {
                token: localStorage.getItem('token') // 获取token
            },
        };
    },
    computed: {},
    mounted() {
    },
    methods: {
        //点击叉号回调
        handleDialogClose () {
            this.$emit("close")
        },
        //上传成功
        handleSuccess(file,fileList) {
            console.log(file)
            this.$emit('handleSuccess',file,fileList)
            this.$message.success(file.message)
        },
        //上传失败
        handleError(file,fileList) {
            this.$emit('handleError',file,fileList)
            this.$message.error(file.message)
        },
        //文件限制
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        //移除文件
        deleteFile(file, fileList){
            console.log(file)
            console.log(fileList)
            this.$emit('handleRemove',file,fileList)
        },
        //上传前判断文件大小
        beforeAvatarUpload (file) {
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                
            const isLt2M = file.size / 1024 / 1024 < this.maxSize
            if(!isLt2M) {
                this.$message({
                    message: '上传文件大小不能超过' + this.maxSize + 'MB!',
                    type: 'warning'
                });
            }
            return isLt2M;
        },
        //下载
        uploadLoad(file) {
            let a = document.createElement('a');
            a.style.display = 'none';
            a.href = file.url;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },
    },
    components: {}
};
</script>

<style lang="scss" scoped>
</style>